<template>
    <div class="itemFormBox">
        <van-search v-model="inputValue" @update:model-value="change" @search="goSearch" :placeholder="placeholder" style="width: 100%;"/>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
const props = defineProps({
    modelValue:'',
    icon:{
        type:String,
        default:'icon-sousuo'
    },
    placeholder:'',
})
const inputValue = ref('')

const emit = defineEmits(['update:modelValue','serach'])

onMounted(()=>{
    inputValue.value = props.modelValue
})

const change = (str)=>{
    emit('update:modelValue', str)
}
const goSearch = ()=>{
    emit('serach',inputValue.value)
}
</script>

<style lang="scss" scoped>
    .itemFormBox{
        box-sizing: border-box;
        display: flex;
        flex: 1;
    }
</style>